<div class="col-md-12">
  <div class="card-header">
    <div class="">
      <form method="get" action="${request.contextPath}/admin/app/index" class="row d-flex justify-content-end">
        <label class="col-form-label col-auto" style="font-weight:bold;text-align:left;">
          &nbsp;查询日期:&nbsp;&nbsp;
        </label>
        <input type="date" class="col-auto" size="20" name="searchDate" id="searchDate" value="${searchDate}">
        <input type="hidden" name="appId" value="${appDesc.appId}">
        <input type="hidden" name="tabTag" value="app_latency">
        <input type="submit" class="btn btn-info col-auto ml-2" value="查询"/>
      </form>
    </div>
  </div>

  <div class="">
    <script type="text/javascript">
      var appId = '${appDesc.appId}';
      var searchDate = '${searchDate}';
      var appLatencyStatsMap = '${appLatencyStatsJson}';
      var appLatencyStatsJson = eval("(" + appLatencyStatsMap + ")");

      Highcharts.setOptions({
        global: {
          useUTC: false
        }
      });
      Highcharts.setOptions({
        colors: ['#2f7ed8', '#E3170D', '#0d233a', '#8bbc21', '#1aadce',
          '#492970', '#804000', '#f28f43', '#77a1e5',
          '#c42525', '#a6c96a']
      });

      $(document).ready(
              function () {
                var data = appLatencyStatsJson;
                var unit = "个数";
                var appTotalOptions = getOption("LatencyContainer", "<b>" + "延迟事件统计</b>", unit);
                appTotalOptions.series = getAppLatencyInfo(data, 'count', unit, searchDate, '${request.contextPath}');
                var appTotalchart = new Highcharts.Chart(appTotalOptions);
              });
    </script>


    <div class="alert alert-warning alert-dismissible">
      提示：点击图中点查看延迟事件详情！
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div id="LatencyContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
  </div>

  <div class="card-header">
    <h5 class="card-title">
      redis实例延迟&慢查询统计
    </h5>
  </div>
  <div class="">
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">实例信息</th>
        <th scope="col">延迟事件个数</th>
        <th scope="col">慢查询个数</th>
      </tr>
      </thead>
      <tbody>
      <#list instanceSet as key>
        <tr>
          <td scope="row">${key_index + 1}</td>
          <td><a href="#${key}">${key}</a></td>
          <td>
            <#assign latency_count = "0">
            <#if appLatencyStatsGroupByInstance?? && appLatencyStatsGroupByInstance[key]??>
              <#assign latency_count = appLatencyStatsGroupByInstance[key]>
            </#if>
            ${latency_count}
          </td>
          <td>
            <#assign slowlog_count="0">
            <#if appInstanceSlowLogCountMap?? && appInstanceSlowLogCountMap[key]??>
              <#assign slowlog_count=appInstanceSlowLogCountMap[key]>
            </#if>
            ${slowlog_count}
        </tr>
      </#list>
      </tbody>
    </table>
  </div>

  <div class="card-header">
    <h3 class="card-title">
      各实例慢查询情况&nbsp&nbsp<label class="label label-info">共${appInstanceSlowLogList?size}次</label>
    </h3>
  </div>
  <div class="">
    <#list instaceSlowLogMap?keys as key>
      <div style="margin-top: 0px">
        <div class="page-header" id="${key}">
          <h5>
            <#assign instanceId=(instaceSlowLogMap[key])[0].instanceId>
            <li>
              <a href="${request.contextPath}/admin/instance/index?instanceId=${instanceId}"
                 target="_blank">${key}</a>
            </li>
          </h5>
        </div>
        <div class="table-responsive">
          <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
              <th scope="col">序号</th>
              <th scope="col">慢查询id</th>
              <th scope="col">耗时(单位:微秒)</th>
              <th scope="col">命令</th>
              <th scope="col">发生时间</th>
            </tr>
            </thead>
            <tbody>
            <#if instaceSlowLogMap?? && instaceSlowLogMap[key]?? && (instaceSlowLogMap[key]?size gt 0)>
              <#assign slowLogList = instaceSlowLogMap[key]>
              <#assign slowLogIndex = 0>
              <#list slowLogList as slowLog>
                <#assign slowLogIndex = (slowLogIndex + 1)>
                <tr>
                  <td scope="row">${slowLogIndex}</td>
                  <td>${slowLog.slowLogId}</td>
                  <td>${slowLog.costTime?string("#,#00")}</td>
                  <td>${slowLog.command}</td>
                  <td>${slowLog.executeTime?string("yyyy-MM-dd HH:mm:ss")}</td>
                </tr>
              </#list>
            </#if>
            </tbody>
          </table>
        </div>
      </div>
    </#list>
  </div>
</div>